<template>
  <div>
    <button @click="comName = 'QrCode'">二维码</button>
    <button @click="comName = 'FormLogin'">账号密码</button>

    <!-- <keep-alive> -->
      <!-- comName对应的组件名是什么，这里就会显示什么组件 -->
      <!-- 其实动态组件内部相当于用的也是v-if-else -->
      <!-- <component :is="comName" /> -->
    <!-- </keep-alive> -->

    <!-- <qr-code v-if="comName === 'QrCode'"/>
    <form-login v-else-if="comName === 'FormLogin'"/> -->

     <!-- 只有写在include里的组件才会被缓存 -->
     <!-- 多个组件都要缓存，就逗号隔开 -->
    <!-- <keep-alive include="FormLogin">
      <component :is="comName" />
    </keep-alive> -->

    <!-- 除了exclude里面的组件，其他都缓存 -->
    <!-- 除了QrCode这个组件以外，其他都缓存 -->
    <keep-alive exclude="QrCode">
      <component :is="comName" />
    </keep-alive>
  </div>
</template>

<script>
// 导入组件
import QrCode from './components/QrCode.vue'
import FormLogin from './components/FormLogin.vue'

export default {
  components: {
    QrCode,
    FormLogin
  },

  data () {
    return {
      comName: 'QrCode'
    }
  }
}
</script>

<style></style>
